<template>
	<view class="notice bg">
		<view class="search">
			<u-search bgColor='#fff' placeholder="搜索公告" v-model="keyword" @custom='custom' @search='search'></u-search>
		</view>
		<view class="radius-22 notice-item pt-30 pl-30 pb-30 pr-30 flex" style="background: #fff"
			v-for="(item,index) in noticeList" :key="index" @click="toNotice(item.id)">
			<view class="">
				<view class="title">系统公告</view>
				<view class="size-30 color-9 mt-20 mb-20">{{ item.title }}</view>
				<view class="notice-time size-22">{{ item.updatetime }}</view>
			</view>
			<image src="/static/login-more.png" mode="" class="more"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				noticeList: []
			};
		},
		methods: {
			custom() {
				this.getgongGao()
			},
			search() {
				this.getgongGao()
			},
			//公告详情
			toNotice(id) {
				uni.navigateTo({
					url: `/pages/home/noticeDetails?id=${id}`
				})
			},
			getgongGao() {
				this.$http(`api/Newapi/gongGao?keyword=${this.keyword}`).then(res => {
					this.noticeList = res
				})
			},
		},
		onLoad() {
			this.getgongGao()
		}
	}
</script>
<style>
	page {
		background: #0A0B20;
	}
</style>
<style lang="scss">
	.search {
		margin-bottom: 30rpx;
	}

	page {
		background: #f5f5f5;
	}

	.notice {
		padding: 24rpx;

		.notice-item {
			margin-bottom: 20rpx;
		}

		.notice-time {
			color: #7c7c7c;
		}
	}

	.more {
		width: 26rpx;
		height: 26rpx;
	}

	.title {
		color: #D7B92E;
		font-weight: bold;
		background: linear-gradient(0deg, #EEA634 0%, #DE2D32 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
</style>
